<template>
  <div>
    <div style="text-align: center;margin-top: 2%">
      <el-input style="width: 30%;margin-right: 2%" v-model="form.academyName" @keyup.native="findAcademy()"
                placeholder="请输入待查找的学院编号/名称/地址"></el-input>
      <el-button type="primary" style="font-size: 20px" @click="findAcademy()">立即查找</el-button>
      <el-button type="primary" style="font-size: 20px" @click="addAcademy()">新增学院</el-button>
    </div>

    <template style="margin-top: 2%">
      <el-table :data="pageInfo.list" style="width: 100%">
        <el-table-column label="学院编号" width="175" prop="academyId" sortable>
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{scope.row.academyId}}</span>
          </template>
        </el-table-column>
        <el-table-column label="学院名称" width="300">
          <template slot-scope="scope">
            <span>{{scope.row.academyName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="学院地址" width="400">
          <template slot-scope="scope">
            <span> {{scope.row.academyAddress}} </span>
          </template>
        </el-table-column>
        <el-table-column label="学院简介" width="500">
          <template slot-scope="scope">
            <span>{{scope.row.academySummary}}</span>
          </template>
        </el-table-column>
        <el-table-column label="启用状态" width="150" prop="academyFlag" sortable>
          <template slot-scope="scope">
            <span>禁用 </span>
            <el-switch
                v-model="scope.row.academyFlag"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="0"
                inactive-value="1"
                @change="stateChange(scope.row)">
            </el-switch>
            <span> 启用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini" type="primary" style="font-size: 16px"
                @click="handleEdit(scope.row.academyId)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-bottom: 1%;"></div>
      <el-pagination
          style="text-align: center;"
          background
          layout="total,prev, pager, next"
          :total="pageInfo.total"
          :page-size="pageInfo.pageSize"
          @current-change="handleCurrentChange">
      </el-pagination>
    </template>
  </div>
</template>

<script>
export default {
  data(){
    return {
      currPage: 1,
      pageInfo:{},
      form: {
        academyName:'',
      },
    }
  },
  created(){
    this.getData();
  },
  methods:{
    handleCurrentChange(val){
      this.currPage = val;
      this.getData();
    },
    getData(){
      let path = `http://localhost:8081/academy/getAcademyList/${this.currPage}`;
      this.$ajax.post(path,this.form).then(res=>{
        this.pageInfo = res.data;
      })
    },
    findAcademy(){
      this.currPage = 1;
      this.getData();
    },
    handleEdit(academyId){
      this.$router.push(`/admin/academyModify/${academyId}`);
    },
    stateChange(row){
      let path = 'http://localhost:8081/academy/updateOneAcademy';
      this.$ajax.post(path,row).then(res=>{
        res.data
      })
    },
    addAcademy(){
      this.$router.push('/admin/academyAdd');
    }
  }
}
</script>

<style scoped>
span{
  font-size: 18px;
}
</style>